<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app{
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            flex-direction: column;
        }
        .myHeader{
            width: 100%;
            height: 100px;
            background: rgb(179, 192,209);
        }
        .myFooter{
           width: 100%;
           height: 100px;
           background: rgb(179, 192,209);
        }
        .my-content{
            display: flex;
            width: 100%;
            flex: 1;
        }
        .myAsdie{
            width: 300px;
            height: 100%;
            background: rgb(211,220,230);
        }
        .myMain{
            flex: 1;
            height: 100%;
            background: rgb(233,238,243);
        }
    </style>
</head>
<body>
    <div id="app">
         
        <my-header></my-header>
    <div class="my-content">
        <my-asdie ></my-asdie>
        <my-main ></my-main>
    </div>
        <my-footer></my-footer>
    </div>

    <script src="../20211018/vue.js"></script>

    <script>
        let myApp=new Vue({
            el:'#app',
            data:{

            },
            methods:{

            },
            components:{
               myHeader:{
                   template:`
                   <div class="myHeader">header</div> 
                   `
               },
               myAsdie:{
                   template:`
                   <div class="myAsdie">asdie</div> 
                   `
               },
               myMain:{
                   template:`
                   <div class="myMain">main</div> 
                   `
               },
               myFooter:{
                   template:`
                   <div class="myFooter">footer</div> 
                   `
               }
            },

        })
    </script>

</body>
</html>